
<template>
  <div class="Page_MailboxStyleBox">
    <div class="Page_MailboxStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_MailboxStyleRightBox">
      <div class="Page_MailboxStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_MailBoxStyleBreadcrumb">
        <a-breadcrumb class="Page_MailBoxBreadcrumb">
          <a-breadcrumb-item><a href="/home">工作台</a></a-breadcrumb-item>
          <a-breadcrumb-item><a href="/mailbox">邮件管理</a></a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="Page_MailBoxStyleBreadContext">
        <div class="Page_MailBoxStyleMessage"><MegMass></MegMass></div>
        <div class="Page_MailBoxFromIpt">
          <p>
            发件人:<input
              type="text"
              class="mAILbOXIpt"
              placeholder="请输入发件人"
            />
          </p>
          <p>
            收件人:<input
              type="text"
              class="mAILbOXIpt"
              placeholder="请输入收件人"
            />
          </p>
          <p>
            主题:<input
              type="text"
              class="mAILbOXIpt"
              placeholder="请输入主题"
            />
          </p>
          <p class="MaiLboxBtn">
            <a-button type="primary">搜索</a-button>&nbsp;
            <a-button>重置</a-button>
          </p>
        </div>
        <div class="page_MailBooStyleFromNull">
          <div class="Page_MailBoxRefresh">
            <p></p>
            <p></p>
            <p><reload-outlined /></p>
          </div>
          <div class="page_MailBooNullFile">
            <p><input type="checkbox" name="" id="" />&nbsp;发件人</p>
            <p>收件人</p>
            <p>主题</p>
            <p>发送时间</p>
            <p id="FileOption">操作</p>
          </div>
          <div class="Page_MailBooNullFileStyle">
            <a-empty class="Null" />
          </div>
        </div>
        <dl style="textAlign: center; marginTop: 20px">
          <dt>
            <a href="https://github.com/fantasticit/wipi"
              ><img src="../../assets/b.png.png" alt=""
            /></a>
          </dt>
          <dd>Copyright ® 2022 Designed by Fantasticit.</dd>
        </dl>
      </div>
    </div>
  </div>
</template>


<script>
import MegMass from "../../components/MegMass/index.vue";
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
import { ReloadOutlined } from "@ant-design/icons-vue";
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    MegMass,
    ReloadOutlined,
  },
};
</script>

<style>
.Page_MailboxStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_MailboxStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #001529;
  border-right: 1px solid #ccc;
}
.Page_MailboxStyleRightBox {
  width: 100%;
  height: 100%;
}
.Page_MailboxStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_MailBoxStyleBreadcrumb {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_MailBoxBreadcrumb {
  margin-top: 10px;
  margin-left: 10px;
  display: inline-block;
}
.Page_MailBoxStyleBreadContext {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #eff2f5;
}
.Page_MailBoxStyleMessage {
  width: 96%;
  height: 50px;
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  margin-left: 30px;
  margin-top: 30px;
}
.Page_MailBoxFromIpt {
  width: 96%;
  height: 150px;
  margin-left: 30px;
  margin-top: 30px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.page_MailBooStyleFromNull {
  width: 96%;
  height: 400px;
  margin-left: 30px;
  margin-top: 30px;
  background: #fff;
}
.mAILbOXIpt {
  width: 190px;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
  outline: none;
}
.MaiLboxBtn {
  margin-top: 50px;
}
.Page_MailBoxRefresh {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Page_MailBoxRefresh > p {
  margin: 20px;
}
.page_MailBooNullFile {
  width: 100%;
  height: 45px;
  display: flex;
  background: #f2f2f2;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.page_MailBooNullFile > p {
  width: 200px;
  margin: 13px 0px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-right: 1px solid #ccc;
}
.Page_MailBooNullFileStyle {
  width: 100%;
  height: 100%;
}
#FileOption {
  border-right: none;
}
.Null {
  margin-top: 50px;
}
</style>
